<template>
	<div>
		<vxe-modal v-model="dialogVisible" title="请填写用户相关信息" width="1200" height="550" show-zoom resize remember>
			<template #default>
				<vxe-form title-colon ref="xForm" title-align="right" title-width="130" :data="formData2"
					:rules="formRules2" :loading="loading2" @submit="submitEvent2" @reset="resetEvent">
					<vxe-form-gather span="12">

						<vxe-form-item title="姓名" field="name" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<vxe-input v-model="params.data.name" placeholder="请输入姓名" clearable
									@input="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
						<vxe-form-item title="手机号" field="phone" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<vxe-input v-model="params.data.phone" placeholder="请输入手机号" clearable
									@input="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
						<vxe-form-item title="用户家庭电话" field="telephone" span="24" :item-render="{}"
							title-overflow="title">
							<template #default="params">
								<vxe-input v-model="params.data.telephone" placeholder="请输入用户家庭电话" clearable
									@input="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
						<vxe-form-item title="用户性别" field="sex" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<el-radio-group v-model="params.data.sex">
									<el-radio :label="0">男</el-radio>
									<el-radio :label="1">女</el-radio>
								</el-radio-group>
							</template>
						</vxe-form-item>


						<vxe-form-item title="邮箱" field="email" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<vxe-input v-model="params.data.email" placeholder="请输入邮箱" clearable
									@input="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
					</vxe-form-gather>
					<vxe-form-gather span="12">
						<vxe-form-item title="所属公司" field="companyid" span="24" :item-render="{}"
							title-overflow="ellipsis">
							<template #default="params">
								<el-select v-model="params.data.companyid" :disabled="userinfo.companyid!=1" filterable
									clearable @change="compancheg" placeholder="请选择">
									<el-option v-for="item in companylist" :key="item.id" :label="item.nameCN"
										:value="item.id">
									</el-option>
								</el-select>
							</template>
						</vxe-form-item>
						<vxe-form-item title="所属运营部门" field="depid" span="24" :item-render="{}"
							title-overflow="ellipsis">
							<template #default="params">
								<el-select v-model="params.data.depid" filterable clearable @change="slel"
									placeholder="请选择所属运营部门" v-if="showment">
									<el-option :value="item.id" :label="item.name"
										v-for="(item,index) in departmentlist" :key="item.id">
									</el-option>
								</el-select>
							</template>
						</vxe-form-item>
						<vxe-form-item title="登录用户名" field="username" span="24" :item-render="{}"
							title-overflow="title">
							<template #default="params">
								<vxe-input v-model="params.data.username" placeholder="请输入登录用户名" clearable
									@input="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
						<vxe-form-item title="密码" field="password" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<vxe-input v-model="params.data.password" placeholder="请输入密码" clearable
									@input="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
						<vxe-form-item title="角色级别" field="level" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<el-radio-group v-model="params.data.level">
									<el-radio :label="0">超级管理</el-radio>
									<el-radio :label="1">公司管理员</el-radio>
									<el-radio :label="2">部门管理员</el-radio>
								</el-radio-group>
							</template>
						</vxe-form-item>
					</vxe-form-gather>
					<vxe-form-gather span="24">
						<vxe-form-item title="地址" field="address" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<el-input maxlength="5000" placeholder="请输入地址" type="textarea" :rows="3"
									v-model="params.data.address" clearable></el-input>
							</template>
						</vxe-form-item>
						<vxe-form-item title="备注" field="remark" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<el-input maxlength="5000" placeholder="请输入备注" type="textarea" :rows="3"
									v-model="params.data.remark" clearable></el-input>
							</template>
						</vxe-form-item>

					</vxe-form-gather>
					<vxe-form-item align="center" span="24" :item-render="{}">
						<template #default>
							<vxe-button type="submit" status="primary">提交</vxe-button>
							<vxe-button type="reset">重置</vxe-button>
						</template>
					</vxe-form-item>
				</vxe-form>
			</template>
		</vxe-modal>
	</div>
</template>

<script>
	import {
		getcompany,
		getDepList,
	} from '../batinfo/index.js'
	import {
		addUser,
		editUser
	} from './index.js'
	import {
		checkNumber
	} from '@/shop/util/validator.js'
	export default {
		data() {
			return {
				formData2: {
					"address": "",
					"company": {
						"address": "",
						"id": 0,
						"nameCN": "",
						"nameEN": "",
						"remark": ""
					},
					"companyid": 0,
					"department": {
						"companyId": 0,
						"enabled": true,
						"id": 0,
						"name": "",
						"parent": true,
						"parentId": 0
					},
					"depid": "",
					"email": "",
					"enabled": true,
					"level": 0,
					"name": "",
					"password": "123123",
					"passwords": "123123",
					"phone": "",
					"remark": "",
					"sex": 0,
					"telephone": "",
					"userface": "",
					"username": "",
					"wechatopenid": ""
				},
				showment: true,
				companyact: '',
				depment: '',
				companylist: [],
				departmentlist: [],
				userinfo: {},
				loading2: false,
				formRules2: {
					name: [{
						required: true,
						message: "用户昵称不能为空",
						trigger: "blur"
					}],
					username: [{
						required: true,
						message: "用户名不能为空",
						trigger: "blur"
					}],
					sex: [{
						required: true,
						message: "请选择性别",
						trigger: "blur"
					}],
					level: [{
						required: true,
						message: "请选择角色级别",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "用户密码不能为空",
						trigger: "blur"
					}],
					telephone: [{
							required: true,
							message: "固话不能为空",
							trigger: "blur"
						},

					],
					email: [{
							required: true,
							message: "邮箱不能为空",
							trigger: "blur"
						},
						{
							type: "email",
							message: "'请输入正确的邮箱地址",
							trigger: ["blur", "change"]
						}
					],
					phone: [{
							required: true,
							message: "手机号码不能为空",
							trigger: "blur"
						},
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: "请输入正确的手机号码",
							trigger: "blur"
						}
					],
					companyid: [{
						required: true,
						message: '请选择公司'
					}],
					depid: [{
						required: true,
						message: '请输入部门'
					}]
				},
				dialogVisible: false,
				loading: false,
			};
		},
		created() {

		},
		methods: {
			handleClose(done) {
				this.resetForm('ruleForm');
				done();
			},
			slel(e) {
				this.showment = false;
				let that = this;
				that.showment = true;
			},
			open(item) {
				console.log(item)
				this.formData2 = {
					...item
				};
				this.formData2.depid = parseInt(this.formData2.depid);
				let userinfo = JSON.parse(localStorage.getItem("userinfo"));
				this.userinfo = userinfo;
				if (userinfo.companyid != 1) {
					this.formData2.companyId = userinfo.companyid;

				}
				this.getcompany();
				this.getDepList();
				this.dialogVisible = true;
			},
			compancheg(e) {
				this.formData2.operationDepartment = '';
				this.companylist.forEach(item => {
					if (item.id == this.formData2.companyId) {
						this.formData2.company = item
					}
				})

				this.getDepList();
			},
			//公司
			async getcompany() {
				let result = await getcompany();
				this.companylist = result.obj;
			},
			//部门
			async getDepList() {
				let parm = {
					"address": "",
					"id": this.formData2.companyid,
					"nameCN": "",
					"nameEN": "",
					"remark": ""
				}

				let result = await getDepList(parm);

				this.departmentlist = result.obj;
			},
			submitEvent2(e) {
				console.log(e);
				this.loading2 = true
				setTimeout(() => {
					this.loading2 = false
					this.oldsava();
				}, 1000)
			},
			searchEvent() {
				this.msgSuccess('查询事件')
			},
			resetEvent() {
				this.msgSuccess('重置')
			},
			resetForm() {
				this.formData2= {
					"address": "",
					"company": {
						"address": "",
						"id": 0,
						"nameCN": "",
						"nameEN": "",
						"remark": ""
					},
					"companyid": 0,
					"department": {
						"companyId": 0,
						"enabled": true,
						"id": 0,
						"name": "",
						"parent": true,
						"parentId": 0
					},
					"depid": "",
					"email": "",
					"enabled": true,
					"level": 0,
					"name": "",
					"password": "123123",
					"passwords": "123123",
					"phone": "",
					"remark": "",
					"sex": 0,
					"telephone": "",
					"userface": "",
					"username": "",
					"wechatopenid": ""
				};
			},
			async oldsava() {
				this.loading = true;
				// this.ruleForm.token = localStorage.getItem('goods__token')
				// this.ruleForm.oldname = this.ruleForm.oname;
				let result;
				if (this.formData2.id) {
					result = await editUser(this.formData2);
				} else {
					this.formData2.loginName = this.formData2.username;
					this.formData2.pwd = this.formData2.password;
					result = await addUser(this.formData2);
				}
				this.loading = false;
				if (result.code == 1) {
					if (this.formData2.id === undefined) {
						this.msgSuccess("新增成功");
					} else {
						this.msgSuccess("修改成功");
					}

					this.resetForm('formData2');
					this.dialogVisible = false;
					this.$emit('oldlist')
				}

			}
		}
	};
</script>

<style></style>
